<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>主页</title>
<link rel="stylesheet"
	href="../resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="../resources/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../resources/css/bootstrap_modify.css">
</head>
<body>
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<span class="navbar-toggle collapsed glyphicon glyphicon-list"
					data-toggle="collapse" data-target="#appointCollapse"
					aria-expanded="false"></span> <a class="navbar-brand"
					href="/schoolBus/client/cHome">校车</a>
			</div>

			<div class="collapse navbar-collapse" id="appointCollapse">
				<ul class="nav navbar-nav navbar-right">
					<li role="presentation" class="active"><a href="#home"
						aria-controls="home" role="tab" data-toggle="tab">预约</a></li>
					<li role="presentation"><a href="#settings"
						aria-controls="settings" role="tab" data-toggle="tab">预约中</a></li>
					<li role="presentation"><a href="#profile"
						aria-controls="profile" role="tab" data-toggle="tab">预约成功</a></li>
					<li role="presentation"><a href="#messages"
						aria-controls="messages" role="tab" data-toggle="tab">预约失败</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container">
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="home">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">预约</h3>
					</div>
					<div class="panel-body">
						<ul class="list-group" id="appoint"></ul>
					</div>
				</div>
			</div>
			<div role="tabpanel" class="tab-pane" id="settings">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">预约中</h3>
					</div>
					<div class="panel-body">
						<ul class="list-group" id="appointing"></ul>
					</div>
				</div>
			</div>
			<div role="tabpanel" class="tab-pane" id="profile">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">预约成功</h3>
					</div>
					<div class="panel-body">
						<ul class="list-group" id="appointSuccess"></ul>
					</div>
				</div>
			</div>
			<div role="tabpanel" class="tab-pane" id="messages">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">预约失败</h3>
					</div>
					<div class="panel-body">
						<ul class="list-group" id="appointFailure"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="appointModal" tabindex="-1" role="dialog"
		aria-labelledby="appointModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="appointModalLabel">预约</h4>
				</div>
				<div class="modal-body">
					<form id="addAppointment" method="POST">
						<div class="form-group">
							<label class="control-label" id="appointLabel"></label> <input
								type="hidden" class="form-control" id="passengerId"
								name="relateToPassenger"><input type="hidden"
								class="form-control" id="dynamicCarNumberId"
								name="relateToDynamicCarNumber">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="appointButton">确定</button>
					<button type="button" class="btn btn-primary"
						id="cancelAppointButton">确定</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="appointResultModal" tabindex="-1"
		role="dialog" aria-labelledby="appointResultModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="appointResultModalLabel">预约</h4>
				</div>
				<div class="modal-body">
					<label id="appointResultLabel"></label>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="appointModalDetails" tabindex="-1"
		role="dialog" aria-labelledby="appointModalDetailsModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="appointModalDetailsModalLabel">详细信息</h4>
				</div>
				<div class="modal-body">
					<ul class="list-group" id="appointModalDivDetails"></ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="../resources/jquery/jquery.min.js"></script>
	<script type="text/javascript"
		src="../resources/jquery/jquery.cookie.js"></script>
	<script type="text/javascript"
		src="../resources/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../resources/js/c_home.js"></script>
</body>
</html>